<template>
  <PageMain>
      <template #body>
      <div class="layout w-full h-full box-border bg-white p-[20px]" ref="RefLayout">
      <div class="search box-border pb-[20px]">
        <div class="title-user">用户管理</div>
        <a-row justify="space-between">
          <span class="flex justify-start items-center">
            <a-input-search v-model="filterData.account" placeholder="请输入" @change="getList" @search="getList">
              <template #prefix>用户账号</template>
            </a-input-search>
            <a-input-search v-model="filterData.username" placeholder="请输入" @change="getList" @search="getList" class="search-input">
              <template #prefix>用户名称</template>
            </a-input-search>
            <!-- <a-button type="text">重置</a-button> -->
          </span>
          <span>
            <a-button type="primary" @click="addUserHandle">添加用户</a-button>
          </span>
        </a-row>
      </div>
      <div
        class="table-box w-full overflow-hidden"
        :style="{ height: moreFilterKey ? 'calc(100% - 232px)' : 'calc(100% - 92px)' }"
      >
        <a-table :columns="columns" :data="list" :pagination="false" :scroll="scrollConfig">
          <template #handle="{ record }">
            <a-button type="text" @click="FuncToRemoveRole(record)">移除用户</a-button>
          </template>
        </a-table>
      </div>
      <div class="page-box w-full h-[40px] overflow-hidden flex justify-end items-center">
        <a-pagination
          :total="page.total"
          show-total
          show-page-size
          @page-size-change="handleSizeChange"
          @change="handleCurrentChange"
        />
      </div>
    </div>
    <a-modal v-model:visible="removePopKey" title-align="start" class="chunk-delete-box"  @ok="handleOk" @cancel="handleCancel">
        <template #title>
      是否确认删除该用户
    </template>
        <div class="chunk-delete-info-box">
          <icon-exclamation-circle-fill class="text-red-600" />
          删除后用户无法恢复
        </div>
        <template #footer>
          <div class="w-full h-full flex justify-end items-center">
            <a-button @click="removePopKey = false">取消</a-button>
            <a-button type="primary" class="ml-2" @click="toRemove">删除</a-button>
          </div>
        </template>
      </a-modal>
    <UserHandleDialog :visiable="userDialogVisible" :roleName="(routeQuery.roleName as string)"
      @onClose="userDialogClose"></UserHandleDialog>
      </template>
      
  </PageMain>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue';
import PageMain from '@/components/PageBox.vue';
import UserHandleDialog from './components/UserHandleDialog.vue'
import { useRoute } from "vue-router";
import { userRoleList, roleDelUser, addRoleUser } from '@/api/roleManagement/roleManagement.ts'
import { Message } from '@arco-design/web-vue';
const route = useRoute();
const routeQuery = reactive(route.query);
const userDialogVisible = ref(false)
const filterData = ref({
  account: '',
  username: ''
})
const RefLayout = ref();
const moreFilterKey = ref(false);
const page = ref({
page: 1,
page_size: 10,
total: 0
});
const userInfo = ref(null)
const removePopKey = ref(false)
// 表格滚动
const scrollConfig = computed(() => {
if (RefLayout.value) {
  const rs = {
    x: '0px',
    y: `${RefLayout.value.clientHeight - (moreFilterKey.value ? 272 : 132)}px`
  };
  console.log(`[ rs ]=>`, RefLayout.value.clientHeight, rs);
  return rs;
}
return {
  x: '0',
  y: '0'
};
});
/**
* @method table表格的标题
*/
const columns = reactive([
{
  title: '用户账户',
  dataIndex: 'account'
},
{
  title: '用户名称',
  dataIndex: 'username'
},
{
  title: '所属组织',
  dataIndex: 'org_name'
},
{
  title: '类型',
  dataIndex: 'org_type'
},
{
  title: '操作',
  slotName: 'handle',
  fixed: 'right',
  align: 'right',
  bodyCellClass: 'flex-right'
}
]);
/**
* @method table表格的数据
*/
const list = ref([])
/**
* 
* @param 获取用户列表
*/
const getList = () => {
  userRoleList({ role_id: routeQuery.id, page: page.value.page, page_size: page.value.page_size, ...filterData.value }).then(res => {
     const { code, data, total } = res
     if (code === 200) {
      list.value = data
      page.value.total = total
     }
  })
}
/**
* @method 添加用户
*/
const addUserHandle = () => {
  userDialogVisible.value = true;
}
/**
* 
* @param 移除用户 
*/
const FuncToRemoveRole = (row:any) => {
  userInfo.value = row
  removePopKey.value = true
}
const toRemove = () => {
  removePopKey.value = false
  roleDelUser({ role_id: Number(routeQuery.id), account: [userInfo.value.account] }).then(res => {
      if (res.code === 200) {
          Message.success("移除用户成功")
          getList()
      } else {
        Message.error(res.message)
      }
  })
}
/**
* @method 关闭弹窗
*/
const userDialogClose = async (valArr: any) => {
  if (valArr.length > 0) {
      const res = await addRoleUser({ role_id: Number(routeQuery.id), account: valArr });
      if (res.code !== 200) {
        Message.error(res.message)
      }
      getList();
  }
  userDialogVisible.value = false;
}
// 分页
const handleSizeChange = (e: number) => {
page.value.page_size = e;
getList();
};
const handleCurrentChange = (e: number) => {
page.value.page = e;
getList();
};
/**
* 删除提示框确认
*/
const handleOk = () => {

}
/**
* 删除提示框取消
*/
const handleCancel = () => {}
onMounted(() => {
  getList()
})
</script>
<style lang="less">
.flex-right {
  .arco-table-cell {
    padding-right: 0;
  }
}
.arco-input-wrapper, .arco-select-view-single, .arco-picker, .arco-textarea{
  background: #fff;
  border: 1px solid #D3DBEB;
  border-radius: 4px;
}
</style>
<style lang="less" scoped>
.search-input {
  margin-left: 16px;
}
.chunk-delete-info-box {
color: #465A80;
:deep(.arco-icon) {
  color: #FFAC38;
}
}
:deep(.arco-table-th) {
  color: #394D73;
}
:deep(.arco-table-td) {
  color: #465A80;
}
.title-user {
  font-size: 16px;
  color: #394D73;
  font-weight: 700;
  margin-bottom: 16px;
}
</style>